<template>
    <s-Home>
        <div class="list">
            <Card style="height: 100%;">
                <div class="purchase">
                    <Button type="primary" @click="modal = true">货物添加</Button>
                    <Modal v-model="modal" title="" :loading="loading" @on-ok="asyncOK">
                        <purchase_add></purchase_add>
                    </Modal>
                </div>
                <h3 style="text-align: center;font-size: large;margin-bottom: 20px;">进货订单列表</h3>
                <Table ref="selection" :columns="columns1" :data="data">

                    <template #name="{ row }">
                        <strong>{{ row.name }}</strong>
                    </template>
                    <template #action="{ row, index }">
                        <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">详情</Button>
                        <Button type="error" size="small" @click="remove(index)">删除</Button>
                    </template>
                </Table>

                <div class="page">
                    <Page :total="total" show-elevator :page-size="pageSize" @on-change="pageChange" show-total></Page>
                </div>

            </Card>
        </div>

    </s-Home>

</template>
<script>
    import api from '../network/api/inventory.js'
    export default {
        name: 'purchase',
        data() {
            return {
                modal: false,
                loading: true,
                total: 0,
                pageSize: 14,
                columns1: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '序列',
                        type: 'index',
                        width:'80'
                    },
                    {
                        title: '订单编号',
                        key: 'purchase_order_num'
                    },
                    {
                        title: '货物编号',
                        key: 'goods_num'
                    },
                    {
                        title: '货物名称',
                        key: 'goods_name'
                    },
                    {
                        title: '类别',
                        key: 'category'
                    },
                    {
                        title: '进货数量',
                        key: 'purchase_quantity'
                    },
                    {
                        title: '进货价格',
                        key: 'purchase_price'
                    },
                    {
                        title: '进货厂商',
                        key: 'purchase_supplier'
                    },
                    {
                        title: '时间',
                        key: 'purchase_date',
                        width: 150
                    },
                    {
                        title: '负责人',
                        key: 'purchase_responsible'
                    },
                    {
                        title: 'Action',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                data: [],
                alldata: []

            }
        },
        methods: {
            purchase() {
                api.getPurchase().then(res => {
                    this.alldata = res.data;
                    this.data = this.alldata.slice(0, 14);
                    this.total = res.data.length;
                })

            },
            //改变页码回调
            pageChange(index) {
                this.data = this.alldata.slice((index - 1) * 14, (index - 1) * 14 + 14)
                console.log('当前页码：' + index);
            },

            handleReset(name) {
                this.$refs[name].resetFields();
            },
            show(index) {
                this.$Modal.info({
                    title: '订单明细',
                    content: `货物编号：${this.data[index].goods_num}<br>
                    货物名称：${this.data[index].goods_name}<br>
                    货物类别：${this.data[index].category}<br>
                    进货数量：${this.data[index].purchase_quantity}<br>
                    进货价格：${this.data[index].purchase_price}<br>
                    进货厂商：${this.data[index].purchase_supplier}<br>
                    进货负责人：${this.data[index].purchase_responsible}`
                })
            },
            remove(index) {
                this.data.splice(index, 1);
            },
            asyncOK() {
                setTimeout(() => {
                    this.modal = false;
                }, 2000);
            }
        },
        created() {
            this.purchase();
        }
    }
</script>
<style>
    .purchase {}

    .list {
        float: left;
    }

    .page {
        text-align: center;
        margin-top: 15px;
    }
</style>